<template>
  <a-spin class="table-gl-con" style="margin-top: 0" :loading="submitLoading">
    <TableWrap style="flex: 1" @refresh="getTableList">
      <template #headerLeft>
        <a-space>
          <p>共计 {{ total }} 条</p>
        </a-space>
      </template>
      <template #tableBody>
        <a-table class="table-singe-line" ref="tableRef" :loading="tableLoading" :bordered="false" :data="tableList" :scroll="{ y: '100%' }" size="mini" :pagination="false">
          <template #columns>
            <a-table-column title="更改类型">
              <template #cell="{ record }">
                <p>{{ getChangeType(record) }}</p>
              </template>
            </a-table-column>
            <a-table-column data-index="previousValue" title="操作前">
              <template #cell="{ record }">
                <p>{{ getChangeOperation(record, 'previousValue') }}</p>
              </template>
            </a-table-column>
            <a-table-column title="操作后" data-index="newValue">
              <template #cell="{ record }">
                <p>{{ getChangeOperation(record, 'newValue') }}</p>
              </template>
            </a-table-column>
            <a-table-column title="操作时间" data-index="eventDateTime">
              <template #cell="{ record }">
                <p>{{ $setTime(record.eventDateTime) }}</p>
              </template>
            </a-table-column>
            <a-table-column title="操作端">
              <template #cell="{ record }">
                <p>{{ LogSystemOperation[record.systemOperation] }}</p>
              </template>
            </a-table-column>
            <a-table-column title="操作人" data-index="createUserName" />
            <a-table-column title="备注" data-index="remark">
              <template #cell="{ record }">
                <div class="flex-c">
                  <p>{{ record.remark }}</p>
                  <a-popconfirm v-model:popup-visible="record.isPopup" @popup-visible-change="editRemarkVal == record.remark" @ok="updateRemark(record)">
                    <template #content>
                      <p class="popconfirm-title">备注</p>
                      <a-textarea v-model="editRemarkVal" style="width: 260px" placeholder="请输入备注" allow-clear />
                    </template>
                    <icon-edit :class="record.isPopup ? 'popup-edit-icon' : 'popup-edit-icon popup-edit-icon-hover'" />
                  </a-popconfirm>
                </div>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </template>
    </TableWrap>
    <div class="pagination-footer">
      <a-pagination size="mini" :total="total" :default-page-size="searchVal.pageSize" :current="searchVal.pageNum" :page-size-options="[20, 50, 100, 200, 300]" show-total show-page-size @page-size-change="sizeChange" @change="changePage" />
    </div>
  </a-spin>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { getAdLogList, updateAdLogRemark } from '@/api/advert'
  import { Message } from '@arco-design/web-vue'
  import { LogChangeType, LogSystemOperation, LogEntityType, AdStatusHandle, DynamicBudgetStrategy } from '../../types'
  import dayjs from 'dayjs'

  const props = defineProps({
    searchParams: {
      type: Object,
      default: () => {},
    },
  })
  const searchVal = ref<any>({
    pageSize: 20,
    pageNum: 1,
  })

  const total = ref(0)
  const tableLoading = ref(false)
  const tableList = ref<Array<any>>([])
  const tableListMap = ref({})
  const submitLoading = ref(false)
  const tableRef = ref()
  const editRemarkVal = ref()

  // 类型
  function getChangeType(row: any) {
    // 指向类型
    let entityType = LogEntityType[row.entityType] || row.entityType
    // 操作类型
    let changeType = LogChangeType[row.changeType] || row.changeType
    return entityType + '-' + changeType
  }

  // 操作前操作后数据
  function getChangeOperation(row: any, key: string) {
    let val = row[key]
    if (!val) return '--'
    if (val == 'CREATED') return '已创建'
    if (row.changeType == 'STATUS') return AdStatusHandle[val] || val
    if (row.changeType == 'IN_BUDGET') return val == 'true' ? '在预算内' : '超出预算'
    if (row.changeType == 'PLACEMENT_GROUP') return val + '%'
    if (row.changeType == 'SMART_BIDDING_STRATEGY') return DynamicBudgetStrategy[val] || val
    if (row.changeType == 'END_DATE' || row.changeType == 'START_DATE') return dayjs(Number(val)).format('YYYY-MM-DD')
    return val
  }
  // 编辑备注
  async function updateRemark(row: any) {
    const res: any = await updateAdLogRemark({
      uniqueCode: row.uniqueCode,
      desc: editRemarkVal.value,
    })
    if (res) {
      Message.success('修改成功')
      getTableList()
    }
  }

  // 分页
  function changePage(val: number) {
    searchVal.value.pageNum = val
    getTableList()
  }
  function sizeChange(val: number) {
    searchVal.value.pageSize = val
    getTableList()
  }
  function getTableListByVal() {
    searchVal.value.pageNum = 1
    getTableList()
  }
  // 获取操作日志数据
  async function getTableList() {
    tableLoading.value = true
    const res: any = await getAdLogList({
      ...props.searchParams,
      ...searchVal.value,
    })
    tableLoading.value = false
    tableRef.value.selectAll(false)
    tableList.value = res?.data?.data || []
    total.value = res?.data?.total || 0
    tableListMap.value = {}
    tableList.value.forEach((el) => {
      el.id = el.shopId + el.campaignId + el.keywordId
      tableListMap.value[el.id] = el
    })
  }

  defineExpose({ getTableListByVal })
</script>
<style lang="less" scoped>
  .table-gl-con {
    height: 100%;
  }
  .gray {
    color: #999;
  }
  .normal {
    color: var(--color-text-2);
  }
  :deep(.arco-table-sorter) {
    margin-left: 2px;
  }
  .popconfirm-title {
    font-size: 14px;
    margin-bottom: 10px;
  }
</style>
